<template>
	<view class="wapper">
		<!-- 轮播图部分 -->
		<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="300" circular>
			<swiper-item v-for="image in bannerLoginData">
				<image :src="httpImageUrl+image.iurl" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- 第二部分 -->
		<view class="msg p40 mt20">
			<view class="loginFontColor fontWeight">Wellcome to</view>
			<view class="fs60 mt20 loginBackColor">源小茶</view>
			<view class="mt20 loginFontColor fontWeight">源自你的美</view>
		</view>
		<view class="btn mt60">
			<button @click="toLogin" class="mt20 backColor1 white" style="width: 80%;" type="default">登录</button>
			<button @click="toRegister" class="mt20 backColor2 loginBackColor" style="width: 80%;" type="default">注册</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerLoginData:[],
			}
		},
		methods: {
			//跳转到注册页面
			toRegister(){
				uni.navigateTo({
				    url: '../register/register'
				});
			},
			toLogin(){
				uni.navigateTo({
				    url: '../login/login'
				});
			}
			
		},
		onLoad() {
			
			var that = this;
			//获取轮播图信息
			uni.request({
			    url: this.httpUrl+'image/queryImageByType', //仅为示例，并非真实接口地址。
			    data: {
			        imageType: '1'
			    },
				header: {
				     'custom-header': 'application/json' //自定义请求头信息
				},
			    success: (res) => {
			        console.log(res.data);
					that.bannerLoginData = res.data.data
			    }
			});
		}
	}
</script>

<style>
	.wapper,uni-page-body{
		width: 100%;
		height: 100%;
	}
	.swiper{
		width: 100%;
		height: 800rpx;
	}
	.swiper image{
		width: 100%;
		height: 100%;
		border-radius: 0 0 200rpx 200rpx;
	}
	
</style>
